<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人信息</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background-color:#faf9f9 ;
            width: 414px;
            height: 896px;
        }
        .iot_dingbu {
            width: 414px;
            height: 50px;
            background: #fff;
            color: #d8d5d5;
            font-size: 22px;
            position: relative;
            text-align: center;
            line-height: 50px;
        }
        .iot_ding {
            width: 414px;
            height: 50px;
            position: relative;
            text-align: center;
            line-height: 50px;
        }
        .iot_touxiang {
            width: 414px;
            height: 200px;
            background-color:  rgba(78, 223, 177,1);
        }
        .iot_touxiang2 {
            width: 414px;
            height: 140px;
            margin-top: 10px;
        }
        .iot_xingxi li {
            width: 360px;
            height: 80px;
            border-bottom:1px #e2dede solid;
            margin-left: 20px;
            list-style-type: none;
        }
        .iot_xingxi li input {
            width: 260px;
            margin-left: 100px;
            height: 40px;
            border: none;
            background-color: #fff;
        }
        input:focus {
            outline: none;
        }
        .iot_xia {
            width: 400px;
            margin-top:10px ;
            margin-left: 7px;
            background-color: #fff;
            border-radius: 10px;
        }
        .iot_xingxi li div {
            position: relative;
            width: 50px;
            top: 30px;
            left: 25px;
        }
        #iot_xingbiehe{
            margin-left: 75px;
            width: 300px;
            position: relative;
            top: 10px; 
        }
        #iot_xingbie {
            height: 16px;
            width: 16px;
            margin: 0;
        }
        .iot_baocun {
            width: 380px;
            margin-top: 10px;
            margin-left: 17px;
            height: 50px;
            color: #fff;
            background-color:  rgba(78, 223, 177,1);
            font-size: 20px;
            text-align: center;
            line-height: 50px;
            border-radius: 50px;
        }
    </style>
</head>
<body>
    <div  class="iot_dingbu">
        <a href="../考核2.html"><img src="../images/left2.png" style="left: 5px;top:12px;position:absolute;width: 25px;"></a>  个人信息
    </div>
    <div class="iot_touxiang">
        <div  class="iot_ding">
            <a href="../考核2.html"><img src="../images/left.png" style="left: 10px;top:20px;position:absolute;width: 15px;"></a>  个人信息
        </div>
        <div class="iot_touxiang2">
            <img src="../images/用户1.png" style="width: 80px;position:relative;left: 167px;">
            <div style="text-align: center;color: #fff;font-size: 14px;margin-top: 10px;">点击修改头像</div>
        </div>
    </div>
    <div class="iot_xia">
        <ul class="iot_xingxi">
            <li><div>账号</div><input type="text" value="用户xxx" disabled></li>
            <li><div>昵称</div><input type="text" value="用户xxx"></li>
            <li>
                <div>性别</div>
                    <div id="iot_xingbiehe">
                        <input type="radio" name="xingbie" checked="checked" id="iot_xingbie">男
                        <input type="radio" name="xingbie" id="iot_xingbie">女
                    </div>
            </li<div>
            <li><div>生日</div><input type="date" placeholder="请选择日期"></li>
            <li><div>城市</div><input type="text" value="请选择城市" disabled></li>
            <li><div>职业</div><input type="text" value="请填写职业" disabled></li>
        </ul>
    </div>
    <div class="iot_baocun">
        保存
    </div>
</body>
</html>